const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    entry: './index.js',
    output: {
        filename: "index.js",
        path: path.resolve(__dirname, 'dist'),
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                exclude: /\.(css|js|html)$/,//排除html  js css以外的资源
                loader: 'file-loader'
            },
            {
                test: /\.(png|jpg|gif)$/i,//file-loader url-loader -D
                use: [
                    {
                        // url-loading能转base64 默认都是进行转 优点能够减少请求数据，减轻服务器压力。缺点图片体积会变大文件请求会变慢
                        // file-loading会j图片拷贝到指定的 目的 分开请求
                        loader: 'url-loader',  //file-loader 或 url-loader  url比file多了size 
                        options: {
                            limit: 8 * 1024,//图片小于8kb则会转成base64 优点能够减少请求数据，减轻服务器压力。缺点图片体积会变大文件请求会变慢
                            esModule: false, //关闭es模块语法
                            // [hash:10] 取hash得前10位  [ext]原来的扩展名  [name]源文件名
                            outputPath: 'img',//图片存放位置路径
                            name: '[hash:10].[ext]'
                        }
                    },
                ],
                type: 'javascript/auto',
            },
            {
                test: /\.html$/,
                loader: 'html-loader'//负责引入img图片从而被url-loader识别
            }
        ]
    },
    mode: 'development'
}